<template>
    <div>
        <div class="list">
            <!-- @load="getData" -->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多电影了" class="movie-list">
                <van-cell v-for="(item, index) in movies" :key="item.id" class="movie-card">
                    <div class="card-content">
                        <div class="poster-wrapper">
                            <img :src="$buildFullImageUrl + item.pic" alt="电影海报" class="movie-poster">
                        </div>
                        <div class="left">
                            <!-- 电影海报 -->
                            <!-- 电影信息区域 -->
                            <div class="movie-info">
                                <!-- 标题和标签 -->
                                <div class="title-bar">
                                    <div class="movie-title" :class="{
                                        'full-width': !shouldShowImaxTag(item.version_type) && getFilteredNonImaxTypes(item.version_type).length === 0,
                                        'with-imax': shouldShowImaxTag(item.version_type),
                                        'with-normal': getFilteredNonImaxTypes(item.version_type).length > 0
                                    }">
                                        {{ item.film_name }}
                                    </div>
                                    <div class="tag-container">
                                        <!-- 非IMAX类型标签 -->
                                        <div class="type3"
                                            v-for="(type, index) in getFilteredNonImaxTypes(item.version_type)"
                                            :key="index">
                                            {{ type }}
                                        </div>

                                        <!-- IMAX类型标签 -->
                                        <div class="types" v-if="shouldShowImaxTag(item.version_type)">
                                            <div class="type1" v-if="hasImax3D(item.version_type)">3D</div>
                                            <div class="type1" v-else-if="hasImax2D(item.version_type)">2D</div>
                                            <div class="type2">IMAX</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="infoCenter">
                                    <div class="text-content">
                                        <div class="movie-details">
                                             <p class="detail-item">
                                                <span class="detail-text">{{ item.like }}人想看</span>
                                            </p>
                                            <p class="detail-item">
                                                <span class="detail-label">导演：</span>
                                                <span class="detail-text">{{ item.director }}</span>
                                            </p>
                                            <p class="detail-item" style="margin-top: 2px;">
                                                <span class="detail-label">主演：</span>
                                                <span class="detail-text">{{ item.cast }}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <!-- <div class="ticket-btn-container">
                                        <van-button class="ticket-btn">预售</van-button>
                                    </div> -->
                                </div>
                                <!-- 简介标签 -->
                                <van-tag class="intro-tag">{{ item.film_type
                                }}</van-tag>
                            </div>
                        </div>
                    </div>
                </van-cell>
            </van-list>
        </div>
    </div>
</template>
<script>
import plantAPI from "@/api/plant";
export default {
    data() {
        return {
            movies: [],
            loading: false,
            finished: false,
            page: 1,
            waitFilmList:[]

        }
    },
    props:['searchValue'],
    created() {
        this.getsoon()
    },
    watch:{
    searchValue() {
      this.movies = this.fuzzySearch(this.waitFilmList,'film_name',this.searchValue)
      this.loading = false;
    }
   },
    methods: {
        getsoon() {
            plantAPI.getsoonAPI({
                current: 1
            }).then(res => {
                this.waitFilmList = JSON.parse(res.data.body).data.records
                this.movies = [...this.waitFilmList]

            })
        },
        getData() {
            // 模拟加载数据
            setTimeout(() => {
                if (this.page === 1) {
                    this.movies = [...this.mockMovies];
                } else {
                    // 加载更多数据，实际项目中这里会从API获取
                    const newMovies = this.mockMovies.map(movie => ({
                        ...movie,
                        id: movie.id + this.page * 10
                    }));
                    this.movies.push(...newMovies);
                }

                this.loading = false;
                if (this.page >= 3) {
                    this.finished = true;
                }
                this.page++;
            }, 500);
        },
        getFilteredNonImaxTypes(versionTypes) {
            if (!Array.isArray(versionTypes)) return [];

            return versionTypes
                .filter(type =>
                    !["IMAX3D", "IMAX2D", "2D"].includes(type) &&
                    type !== "2D" // 明确排除普通2D
                )
                .slice(0, this.shouldShowImaxTag(versionTypes) ? 1 : 2);
        },
        // 判断是否应该显示 IMAX 标签（3D 或 2D）
        shouldShowImaxTag(versionTypes) {
            if (!Array.isArray(versionTypes)) return false;
            return versionTypes.includes("IMAX3D") || versionTypes.includes("IMAX2D");
        },
        // 检查是否有 IMAX3D
        hasImax3D(versionTypes) {
            return Array.isArray(versionTypes) && versionTypes.includes("IMAX3D");
        },
        // 检查是否有 IMAX2D
        hasImax2D(versionTypes) {
            return Array.isArray(versionTypes) && versionTypes.includes("IMAX2D");
        },
        isPreview(publishDate) {
            if (!publishDate) return false;
            const currentDate = new Date();
            const movieDate = new Date(publishDate);
            return movieDate > currentDate;
        },
      fuzzySearch(data, field, keyword) {
        if (!Array.isArray(data)) {
          return [];
        }

        if (typeof field !== 'string' || !field.trim()) {
          return [];
        }

        if (typeof keyword !== 'string') {
          return [];
        }

        // 转换为小写以便不区分大小写搜索
        const lowerKeyword = keyword.toLowerCase();

        return data.filter(item => {
          // 检查对象是否存在且是否有该字段
          if (!item || typeof item !== 'object' || !(field in item)) {
            return false;
          }

          // 获取字段值并转换为字符串
          const value = item[field];
          const strValue = String(value).toLowerCase();

          // 检查是否包含关键词
          return strValue.includes(lowerKeyword);
        });
      }
    }
}

</script>
<style lang="scss" scoped>
.list:first-child {
    margin-top: 8px;
}

.card-content,
.left {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    overflow: hidden;
    /* 确保内部内容不破坏圆角 */

    .ticket-btn-container {
        display: flex;
        align-items: center;

        .ticket-btn {
            width: 65px;
            height: 30px;
            background:#5798f2;
            box-shadow: 0px 3px 6px rgba(238, 71, 59, 0.16);
            border-radius: 24px;
            font-family: PingFang SC;
            font-size: 13px;
            color: #FFFFFF;
        }
    }

    .poster-wrapper {
        width: 83px;
        height: 96px;

        .movie-poster {
            width: 83px;
            height: 96px;
            border-radius: 10px;
        }

    }

    .movie-info {
        margin-left: 6px;
        width: 100%;
        overflow: hidden; // 确保不会撑开布局

        .intro-tag {
            display: inline-block;
            max-width: 95%; // 最大宽度不超过父容器
            height: 15px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #D3D3D3;
            font-size: 10px;
            color: #999999;
            padding: 0 5px;
            white-space: nowrap; // 禁止换行
            overflow: hidden; // 隐藏溢出内容
            text-overflow: ellipsis; // 显示省略号
            vertical-align: middle; // 垂直对齐
        }

        .movie-details {

            .detail-item {
                /* 根据实际容器宽度调整 */
                display: flex;
                align-items: center;
                height: 14px;
                margin-top: 4px;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #999999;

                .detail-label {
                    color: #999;
                    margin-right: 4px;
                    white-space: nowrap;
                }
            }

            // 处理长文本溢出
            .detail-item:last-child {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .title-bar {
            display: flex;
            align-items: center;

            .types {
                width: 60px;
                display: flex;
                align-items: center;
                position: relative;

                .type1 {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 21px;
                    height: 16px;
                    background: #EE473B;
                    border-radius: 5px 0px 0px 5px;
                    font-family: PingFang SC;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 16px;
                    text-align: center;
                    border: 1px solid #EE473B;
                }

                .type2 {
                    position: absolute;
                    left: 20px;
                    text-align: center;
                    top: 0;
                    width: 34px;
                    height: 16px;
                    line-height: 16px;
                    border-radius: 0px 5px 5px 0px;
                    border: 1px solid #EE473B;
                    font-size: 10px;
                    color: #EE473B;
                }

            }

            .movie-title {
                margin-right: 5px;
                height: 20px;
                line-height: 20px;
                font-family: PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1A1A1A;
                max-width: 100%; // 最大宽度（根据实际布局调整）
                white-space: nowrap; // 禁止换行
                overflow: hidden; // 隐藏溢出内容
                text-overflow: ellipsis; // 显示省略号
                display: inline-block; // 必须设置为块级元素才能生效
            }

            .tag-container {
                display: flex;
                align-items: center;

                .type3 {
                    font-size: 10px;
                    padding: 0 5px;
                    background: linear-gradient(110deg, #FEDECD 0%, #FEC9A8 100%);
                    border-radius: 5px;
                    margin-left: 4px;
                    height: 16px;
                    line-height: 16px;
                }

                >div {
                    text-align: center;
                    // 
                    height: 16px;
                    line-height: 16px;
                    border-radius: 5px;
                    font-family: PingFang SC;
                    margin-left: 4px;
                    font-size: 10px;
                    color: #000000;
                }



                .point_film {
                    width: 31px;
                    background: #FF9D00;
                    color: #FFFFFF;
                }
            }
        }
    }
}

::v-deep .van-list {

    background: #F5F6F8 !important;
}

.movie-card {
    padding: 0 9px;
    margin-top: 8px;
    overflow: hidden;
    /* 新增 */
    background: #F5F6F8;

    .card-content {
        border-radius: 10px;
        background: #fff;
        margin: 0 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
}

/* 清除 van-cell 的干扰样式 */
::v-deep .van-cell {
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.infoCenter {
    display: flex;
    width: 100%;
    min-width: 0;

    .text-content {
        width: 190px;
        overflow: hidden;
    }

    .detail-text {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ticket-btn-container {
        width: 65px;
        flex-shrink: 0;
    }
}
</style>